<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="部门">
          <el-input v-model="deptName" size="mini" readonly></el-input>
        </el-form-item>

        <el-form-item label="岗位" required>
          <el-input v-model="positionName" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="岗位人数" required>
          <el-input v-model="totalNum" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="拟招聘人数" required>
          <el-input v-model="needNum" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="招聘原因" required>
          <el-radio v-model="reason" label="新增">新增</el-radio>
          <el-radio v-model="reason" label="离职补充">离职补充</el-radio>
          <el-radio v-model="reason" label="调动补充">调动补充</el-radio>
        </el-form-item>
        <el-form-item label="申请人" required>
          <el-input v-model="applicantName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="申请日期" required>
          <el-input v-model="applicantDate" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="期望到岗时间" required>
          <el-input v-model="exceptTime" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="岗位职责">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="responsibility" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="任职要求">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="specification" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="其他说明">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="other" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <a :href="fileUrl" target="_blank">{{fileName}}</a>
        </el-form-item>

        <el-form-item id="bhreason" style="display: none" label="驳回原因" required>
          <el-input v-model="bhreason" size="mini"></el-input>
        </el-form-item>

        <div class="upload_area">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
            <!--<van-step>
              <h3>{{leader}}</h3>
              <van-image width="60" height="60" :src="leaderImg"/>
            </van-step>-->

            <van-step v-if="oneShow">
              <h3>一级审批</h3>
              <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="twoShow">
              <h3>二级审批</h3>
              <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="threeShow">
              <h3>三级审批</h3>
              <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
            <van-step v-if="yxshow">
              <h3>{{yxleader}}</h3>
              <van-image width="60" height="60" :src="yxleaderImg"></van-image>
            </van-step>
            <van-step>
              <h3>{{hrleader}}</h3>
              <van-image width="60" height="60" :src="hrleaderImg"/>
            </van-step>

            <van-step>
              <h3>{{bossleader}}</h3>
              <!--<van-image width="60" height="60" :src="boss1leaderImg" style="margin-right: 20px"/>-->
              <van-image width="60" height="60" :src="boss2leaderImg"/>
            </van-step>
          </van-steps>
        </div>

        <el-form-item>
          <!--<el-button id="isAgree" style="display: none" type="primary" size="mini" @click="urgency">{{message}}</el-button>
          <el-button id="isBack" style="display: none" type="warning" size="mini" @click="backout">撤销</el-button>-->
          <el-button id="isAgree" style="display: none" type="primary" size="mini" @click="urgency">催办</el-button>
        </el-form-item>
        <el-form-item>
          <el-button id="isBack" style="display: none" type="warning" size="mini" @click="backout">撤销</el-button>
          <el-button id="isYesAgree" style="display: none" disabled type="primary" size="mini">已通过</el-button>
          <el-button id="isNotAgree" style="display: none" disabled type="primary" size="mini">已驳回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Toast,Picker,Popup,Dialog} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  Vue.use(Dialog)
export default {
  data() {
    return {
      title:"招聘需求申请详情",
      nowUser:"",
      id:"",
      deptId:"",
      deptName:"",//部门名称
      posId:"",
      positionName:"",//岗位名称
      totalNum:"",
      needNum:"",
      reason:"",
      applicantName:"",
      applicantDate:"",
      exceptTime:"",
      message:"催办",
      isShow:false,
      active:"-1",//步骤索引,从0开始
      leader:"",//直接领导
      hrleader:"",//hr经理
      bossleader:"胡仁华",//上级领导
      leaderImg:"",
      hrleaderImg:"",
      boss1leaderImg:"",
      boss2leaderImg:"",
      yxshow:false,
      yxleader:"徐朕鸿",
      yxleaderImg:"",
      bhreason:"",
      responsibility:"",
      specification:"",
      other:"",
      fileUrl:"",
      fileName:"",

      oneShow:false,
      twoShow:false,
      threeShow:false,
      onespusers:[],
      twospusers:[],
      threespusers:[],
    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.id=this.$route.params.applicationId;
    this.selLeaderByApplicaId();
    this.getDetail();//找到对应的页面详情，及领导信息
  },

  methods: {
    selLeaderByApplicaId(){
      this.leaderList=[];
      this.leader="";
      this.$https.post('/mobiles/selLeaderByApplicaId', {
        id:this.id
      }).then((res)=>{
        //展示审批流程
        if (res.data.onespusers && res.data.onespusers.length>0){
          this.oneShow=true;
          this.onespusers=res.data.onespusers;
        }else{
          this.oneShow=false;
          this.onespusers=[];
        }
        if (res.data.twospusers && res.data.twospusers.length>0){
          this.twoShow=true;
          this.twospusers=res.data.twospusers;
        }else{
          this.twoShow=false;
          this.twospusers=[];
        }
        if (res.data.threespusers && res.data.threespusers.length>0){
          this.threeShow=true;
          this.threespusers=res.data.threespusers;
        }else{
          this.threeShow=false;
          this.threespusers=[];
        }

        var bossList=res.data.bossleader;
        this.hrleaderImg=bossList[0].avatar;
        this.hrleader=bossList[0].name;
        // this.boss1leaderImg=bossList[1].avatar;
        this.boss2leaderImg=bossList[1].avatar;
        if (bossList.length>2){
          this.yxshow=true;
          this.yxleader=bossList[2].name;
          this.yxleaderImg=bossList[2].avatar;
        }

      }).catch(err => {
        console.log(err);
      })
    },
    //根据传递的招聘申请id获取相应的申请信息
    getDetail(){
      //console.log(id)
      this.$https.post('/mobiles/selApplicationDetail', {
        nowUser:this.nowUser,
        id:this.id,
      }).then((res)=>{

        this.deptName=res.data.data.deptName;
        this.positionName=res.data.data.positionName;
        this.totalNum=res.data.data.totalNum;
        this.needNum=res.data.data.needNum;
        this.reason=res.data.data.reason;
        this.applicantName=res.data.data.applicantName;
        this.applicantDate=res.data.data.applicantDate;
        this.exceptTime=res.data.data.exceptTime;
        this.responsibility=res.data.data.responsibility;
        this.specification=res.data.data.specification;
        this.other=res.data.data.other;
        if (res.data.data.fileNameTip===""){
          this.fileName="暂无"
        }else {
          this.fileName=res.data.data.fileNameTip;
        }
        this.fileUrl=res.data.data.fileNameUrl;
        this.active=res.data.data.isAgree-1;
        /*this.leader=res.data.data.leaderName;
        this.leaderImg=res.data.data.leaderImg;
        this.hrleaderImg=res.data.data.hrleaderImg;
        this.hrleader=res.data.data.hrname;
        this.boss1leaderImg=res.data.data.boss1leaderImg;
        this.boss2leaderImg=res.data.data.boss2leaderImg;*/

        debugger
        if (res.data.data.state=='已通过'){
          //this.isShowAgree=false;
          document.getElementById("isYesAgree").style.display="block";
        }else if (res.data.data.state=='已驳回'){
          document.getElementById("bhreason").style.display= "";
          this.bhreason=res.data.data.bhreason;
          document.getElementById("isNotAgree").style.display="block";
        }else{
          document.getElementById("isAgree").style.display="block";
          document.getElementById("isBack").style.display="block";
        }

      }).catch(err => {
        console.log(err);
      })
    },


    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 催办下一级审批者
    urgency() {
      this.$https.post('/mobiles/urgency', {
        nowUser:this.nowUser,
        id:this.id,
      }).then(res => {
        res;
        Toast("已催办下一级审批人");
        this.getDetail();//找到对应的页面详情，及领导信息

      }).catch(err => {
        console.log(err)
      });
    },

    //撤销提出的招聘申请
    backout(){
      this.$https.post('/mobiles/backout', {
        nowUser:this.nowUser,
        id:this.id,
      }).then((res) => {
          Toast(res.data.message);
        this.getDetail();//找到对应的页面详情，及领导信息

      }).catch(err => {
        console.log(err)
      });
    }

  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>